<template>
	<view class="lost-context">
			<uni-search-bar @confirm="search" :focus="true" v-model="keyword"
							@cancel="cancel" @clear="clear" bg-color="#fff">
			</uni-search-bar>
			
			<view class="lost-context-item">
				<uni-card :is-shadow="true" v-for="(item,index) in lost_list" >
					<view style="display: flex;">
						<view class="lost-image">
							<image :src="item.url" mode="scaleToFill" style="width: 220rpx; height: 220rpx; background-color: #eeeeee;" ></image>
						</view>
						<view class="lost-desc">
							<view>
								<text>失物名称：{{item.name}}</text>
							</view>
							<view>
								<text>拾取地点：{{item.lostLocation}}</text>
							</view>
							<view>
								<text>拾取时间：{{lostDateFormat(item.findTime)}}</text>
							</view>
							<view>
								<text>待领取地点：{{item.receiveLoction}}</text>
							</view>
							<view>
								<text>服务电话：{{item.lostPhone}}</text>
							</view>
							
						</view>
						
					</view>
					
				</uni-card>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword:'',
				lost_list:[
					{
						id:1,
						name:'耳机',
						lostLocation:'亭子里',
						findTime:'10-9 11:20',
						receiveLoction:'游客中心',
						lostPhone:'13677548832',
						url:'../../static/lost/1.jpg'
					}
					
				],
				
			}
		},
		onLoad(){
			this.init()
		},
		
		methods: {
			lostDateFormat(date){
				var d = new Date(date)
				var day = d.getDate()
				var month = d.getMonth()+1
				var hour = d.getHours()
				var minute = d.getMinutes()
				var mh0= ''
				var d0 = ''
				var h0 = ''
				var m0 = ''
				if(minute<10){
					m0 = '0'
				}
				if(hour<10){
					h0 = '0'
				}
				if(month<10){
					mh0 = '0'
				}
				if(day<10){
					d0 = '0'
				}
				return mh0+month+'-'+d0+day+h0+hour+':' +m0+minute
			},
			init(){
				this.request({
					url:'/lost/list',
					method:'GET',
					data:{
						keyword:this.keyword
					}
				}).then(res=>{
					if(res.code==='1'){
						this.lost_list = res.data
					}else{
						uni.showToast({
							icon:'error',
							title:'请求数据失败'
						})
					}
				}).catch(()=>{
					uni.showToast({
						icon:'error',
						title:'服务异常'
					})
				})
			},
			search(){
				this.init()
			},
			cancel(){
				this.keyword=''
				this.init()
			}
		}
	}
</script>

<style>
.lost-context{
	background-color: #f8f8f8;
	width: 100%;
	min-height: 100vh;
	max-width: 100%;
}
.lost-image {
	width: 220rpx;
	height: 220rpx;
	background-color: aqua;
}
.lost-desc{
	margin-left: 28rpx;
}
</style>
